<%--
  Created by IntelliJ IDEA.
  User: buzhuang
  Date: 2020/9/12
  Time: 17:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><%--
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<script src="${pageContext.request.contextPath}/static/layui/layui.all.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>

<table id="demo" lay-filter="test"></table>

<script type="text/javascript">
    layui.use('table', function () {
        var table = layui.table;
        //执行渲染
        table.render({
            page:  {limits: [5, 10, 15, 20, 25]}  ,
            url: '/goods/all'
            , elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
            , width: 1000 //容器高度
            , cols: [[ //标题栏
                {field: 'shopid', title: '商品id', width: 80}
                , {field: 'shopname', title: '商品名称', width: 120}
                , {field: 'pic', title: '商品图片', width: 120}
                , {field: 'price', title: '商品价格', width: 120}
                , {field: 'star', title: '商品评分', width: 120}
                , {field: 'info', title: '商品信息', width: 120}
            ]] //设置表头
            //,…… //更多参数参考右侧目录：基本参数选项
        });
    });

</script>
</body>
</html>--%>
<%--<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="margin-bottom: -100px;">

    <!-- 示例-970 -->
    <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

</div>

<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>

<table class="layui-table" lay-data="{width: 1200, height:330,url:'/goods/all' ,  page: {limits: [5, 10, 15, 20, 25]}, id:'idTest'}" lay-filter="demo">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'shopid', width:80, sort: true, fixed: true}">ID</th>
        <th lay-data="{field:'shopname', width:80}">用户名</th>
        <th lay-data="{field:'pic', width:200, sort: true}">性别</th>
        <th lay-data="{field:'price', width:80}">城市</th>
        <th lay-data="{field:'star', width:160}">签名</th>
        <th lay-data="{field:'info', width:160, sort: true}">积分</th>


        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.shopid + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>--%>


<html>
<head>
    <title>Title</title>
    <link type="text/css" href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>

<script type="text/javascript">

</script>

<%--     模态框        --%>
<div id="modleBox" style="display: none; margin: auto">
    <form  id="frm"  >

        <%--  商品名称:<input type="text" name="shopname"><br>
          商品图片:<input type="text" name="pic"><br>xiaomi10-3.jpg
          商品价格:<input type="text" name="price"><br>
          商品评分:<input type="text" name="star"><br>
          商品信息:<input type="text" name="info"><br>--%>
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" name="uname" required lay-verify="required" placeholder="请输入用户名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户手机</label>
            <div class="layui-input-block">
                <input type="text" name="utel" required lay-verify="required" placeholder="请输入用户手机"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-block">
                <input type="text" name="upass" required lay-verify="required" placeholder="请输入用户密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block">
                <input type="text" name="urole" required lay-verify="required" placeholder="请输入用户角色"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <fieldset class="layui-elem-field site-demo-button" style="margin: auto; border: solid 0px">
            <div style="margin-left: 160px">
                <button type="submit" class="layui-btn layui-btn-normal">提交</button>
            </div>

        </fieldset>
    </form>
</div>
<table class="layui-hide" id="resource" lay-filter="resource"></table>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>



<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="Singledel">删除</a>
</script>
<script type="text/html" id="btnDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script>
    var tobleReload;
    layui.use(['table','layer'], function(){
        var table = layui.table;
        var layer=layui.layer;

        var layerAdd;
        $(function () {
            $("#frm").submit(function () {

                $.ajax({
                    type: "post",
                    data:$("#frm").serialize(),
                    url: "/user/insert",
                    success: function (mess) {
                        layer.close(layerAdd);
                        tobleReload.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                });

                return false;

            });

        })

        tobleReload=table.render({
            elem: '#resource'
            ,url:'/user/all'
            ,toolbar: '#btnDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'uid', title:'用户ID', width:120, fixed: 'left', unresize: true, sort: true}
                ,{field:'uname', title:'用户名称', width:120, edit: 'text'}
                ,{field:'utel', title:'用户电话', width:120, edit: 'text'}
                ,{field:'upass', title:'用户密码', width:100, edit: 'text'}
                ,{field:'urole', title:'用户角色', edit: 'text'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: {limits: [5, 10, 15, 20, 25]}
        });



        //监听工具条

        table.on('tool(resource)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                $.ajax({
                    type: "post",
                    url: "/user/update",
                    data: {
                        uid:data.uid,
                        uname:data.uname,
                        utel:data.utel,
                        upass:data.upass,
                        urole:data.urole
                    },
                    success: function (mess) {
                        //alert('123');
                        tobleReload.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                });
            }else if (obj.event === 'Singledel') {
                layer.confirm('真的删除行么', function(index){
                    alert(data.uid);
                    var data1=data.uid;
                    $.ajax({
                        type: "GET",
                        url: "/user/del/"+data1,
                        data: data1,
                        success: function (mess) {
                            layer.msg('删除成功',{
                                icon:6
                            });
                            tobleReload.reload({
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        }
                    });
                    layer.close(index);
                });

            }
        });

        //监听头工具栏事件
        table.on('toolbar(resource)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            if(obj.event === 'del'){
                var idArry="idArry="+data[0].uid;
                alert(data[0].uid);
                for(var i=1;i<data.length;i++){
                    alert(data[i].uid);
                    idArry+=","+data[i].uid;
                }
                $.ajax({
                    type:"GET",
                    url:"/user/deleteSelect",
                    data:idArry,
                    success:function (mess) {
                        layer.msg('删除成功',{
                            icon:6
                        });
                        tobleReload.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                });
            }else if(obj.event === 'add'){
                layui.use(['layer'],function () {
                    var layer = layui.layer,$=layui.$;

                    layerAdd=layer.open({
                        type: 1
                        ,area:['400PX','300PX']
                        , content: $('#modleBox')
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        ,zIndex:layer.zIndex
                        ,yes: function(){
                        }
                    });
                });
            }
        });


    });
</script>

</body>
</html>

